<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="container">
    <ul class="list">
        <li>
            <a href="http://localhost/demo/html5/index.php">测试1</a>
        </li>
        <li>
            <a href="http://localhost/demo/html5/index2.php">测试2</a>
        </li>
        <li>
            <a href="http://localhost/demo/html5/index3.php">测试3</a>
        </li>
    </ul>

    <div class="all-content">
        <ul class="content">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
    $(function(){
        var ajax,curState;
        $(".content li").unbind("click",function(e){
            e.preventDefault();
            var target = e.target,
                    url = $(target).attr("href");
            !$(this).hasClass("current") && $(this).addClass("current").siblings().removeClass("current");
            if(ajax == undefined) {
                curState={
                  url:document.location.href,
                    title:document.title,
                    html:$(".content").html()
                };
            }

            ajax = $.ajax({
                type:"POST",
                url:url,
                dataType:JSON,
                success:function(data) {
                    var html = "";
                    if (data.length > 0) {
                        for (var i = 0, j = data.length; i < j; i++) {
                            html += "<li>" + data[i].age + "</li>"
                                    + "<li>" + data[i].name + "</li>"
                                    + "<li>" + data[i].sex + "</li>";
                        }
                        $(".content").html(html);
                    }
                    var state = {
                        url: url,
                        title: document.title,
                        html: $(".content").html()
                    };
                    history.pushState(state,null,url);
                }
            });
        });


        window.addEventListener("popstate",function(event){
            if(ajax == null){
                return;
            }

            if(event && event.state){
                document.title = event.state.title;
                $(".content").html(event.state.html);
            }
            else{
                document.title = curState.title;
                $(".content").html(curState.html);
            }
        });

    });
</script>